<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - ColorField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body class="yui-skin-sam">

<h1>inputEx - ColorField Usage</h1>

<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Basic ColorField creation</h2>
	<p>Use the following code to create a basic inputEx ColorField.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.ColorField({parentEl: 'container1', label: 'Choose a color', description: 'Click to view the available colors'});
		</textarea>
	</div>
</div>


<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Updated event</h2>
	<p>How to listen to the updated event :</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
			var el = YAHOO.util.Dom.get('container2');
			var field = new inputEx.ColorField({parentEl: el });
			var logDiv = inputEx.cn('div', null, null, "Log :");
			el.appendChild(logDiv);
			field.updatedEvt.subscribe(function() {
				logDiv.innerHTML += "Updated at "+(new Date());
				logDiv.appendChild(inputEx.cn('br'));
			});
		</textarea>
	</div>
</div>

<!-- Example 3 -->
<div class='exampleDiv'>
	<h2>Setting the color</h2>
	<p>The usual 'value' parameter:</p>
	<div class='demoContainer' id='container3'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.ColorField({parentEl: 'container3', value: '#ADC2FF'});
		</textarea>
	</div>
</div>

<!-- Example 4 -->
<div class='exampleDiv'>
	<h2>Using a different palette</h2>
	<p>You can choose another predefined palette, or a set of custom colors.</p>
	<div class='demoContainer' id='container4'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			new inputEx.ColorField({parentEl: 'container4', palette:1, label:"Palette 1"});
			new inputEx.ColorField({parentEl: 'container4', palette:2, label:"Palette 2", cellPerLine:5});
			new inputEx.ColorField({parentEl: 'container4', palette:3, label:"Palette 3", cellPerLine:10});
			new inputEx.ColorField({parentEl: 'container4', palette:4, label:"Palette 4", cellPerLine:9});
			new inputEx.ColorField({parentEl: 'container4', palette:5, label:"Palette 5"});
			new inputEx.ColorField({parentEl: 'container4', palette:6, label:"Palette 6"});
			new inputEx.ColorField({parentEl: 'container4', label:"Custom colors", colors:["#D0D0D0","#31A8FA","#8EC1E5","#58D7CF","#89E2BB","#A7F7F8","#F6B77C","#FE993F","#EEEEEE","#84CBFC","#BCDAF0","#9BE7E3","#B9EED7","#CBFBFB","#FAD4B1","#FFC28C","#FE6440","#F56572","#FA9AA3","#F7B1CA","#E584AF","#D1C3EF","#AB77B8","#C69FE7","#FFA28D","#F9A3AB","#FCC3C8","#FBD1E0","#F0B6CF","#E4DBF6","#CDAED5","#DDC6F1"]});
		</textarea>
	</div>
</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/button/button-min.js"></script>
<!-- event-delegate is an optional dependency that helps reducing the number of listeners of the ColorField-->
<script type="text/javascript" src="../lib/yui/event-delegate/event-delegate-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/ColorField.js"  type='text/javascript'></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>